/*
 * @Author: your name
 * @Date: 2022-03-30 09:45:31
 * @LastEditTime: 2022-04-08 18:06:14
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \四阶段项目\erp-management-system\src\views\work\Writing.jsx
 */
import React, { useEffect, useRef, useState } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { Form, Input, Button, Row, Col } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import './work.css';
import ReactWEditor from 'wangeditor-for-react';
import axios from '../../../utils/myAxios'

const Writing = () => {
    const { state } = useLocation()
    console.log(state);
    const { title, reporttime, type, content } = state
    const [inputType, setinputType] = useState('');
    //路由跳转
    const navigate = useNavigate();
    //富文本
    const endorseRef = useRef(null)
    const editorRef = useRef(null)
    //表单提交函数
    const onFinish = (values) => {
        console.log('Success:', values);
    };

    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    //保存
    const onSubmt = () => {
        // navigate(-1)
        const lalal = {
            "contacts": "string",
            "content": "string",
            "employeeId": 0,
            "employeeName": "string",
            "file": "string",
            "id": 0,
            "reporttime": "2022-04-08T08:04:23.246Z",
            "title": "string",
            "type": 0
        }
        axios.post('/anno/updateById', {

        })
            .then(res => {

            })
    }
    //关闭
    const onClose = () => {
        navigate(-1)
    }
    useEffect(() => {
        editorRef.current.editor.txt.append(content)
        console.log(editorRef.current.editor.$textElem.attr());
        editorRef.current.editor.$textElem.attr('contenteditable', false)
        endorseRef.current.editor.isFocus = true
        const typeArr = ['工作心得', '日报', '周报', '月报', '季报', '年报']
        const newInputType = typeArr.filter((item, index) => {
            return index === type
        })
        setinputType(newInputType)


        return () => {
        };
    }, []);
    //下载附件
    const loadAccessory = () => {
        console.log('下载附件')
    }
    return (
        <div >
            <Row className='top-personinfo'>{title}&nbsp;&nbsp;{reporttime}</Row>
            <h3 style={{ marginLeft: '20px' }}>查看工作报告</h3>
            <Form
                name="basic"
                labelCol={{ span: 8 }
                }
                wrapperCol={{ span: 16 }}
                initialValues={{ remember: true }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
                <Row>
                    <Col span={24}>
                        <Form.Item
                            label="报告分类"
                            labelCol={{ span: 3 }}
                        >
                            <Input value={inputType} readOnly />
                        </Form.Item>
                    </Col>
                </Row>

                <Row>
                    <Col span={24}>
                        <Form.Item
                            label="工作总结"
                            labelCol={{ span: 3 }}
                        >
                            <ReactWEditor
                                initialValues={''}
                                ref={editorRef}
                                className='editor-ref'
                            />
                        </Form.Item>
                    </Col>
                </Row>

                <Row>
                    <Col span={24}>
                        <Form.Item
                            label="附件"
                            labelCol={{ span: 3 }}
                        >
                            <div style={{ display: 'none' }}>无</div>
                            <div>
                                <span>fileName</span>
                                <span className='load-accessory' onClick={loadAccessory}>[ 下载附件 ]</span>
                            </div>
                        </Form.Item>
                    </Col>
                </Row>

                <Row>
                    <Col span={24}>
                        <Form.Item
                            label="领导批注"
                            name='endorse'
                            labelCol={{ span: 3 }}
                            rules={[{ required: true }]}
                        >
                            <ReactWEditor
                                ref={endorseRef}
                                className='endorse-ref'
                            />
                        </Form.Item>
                    </Col>
                </Row>

                <Row justify='center' className='flow-endorse'>
                    <Button icon={<PlusOutlined />} type="primary" onClick={onSubmt} className='endorseBtnSave'>保存</Button>
                    <Button icon={<PlusOutlined />} type="primary" onClick={onClose} className='endorseBtnClose'>关闭</Button>
                </Row>
            </Form >

        </div >
    );
}

export default Writing;
